<template>
    <div class="novel">
        <!--头部 -->
         <div class="name" @click="$router.go(-1)">书程小驿</div>
         <div class="children" @click="$router.go(-1)" ></div>
         <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <h1>优质少儿读物</h1>
        <div class="test">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="http://47.109.18.97/images/zl-html1.jpg" width="300" height="300"/> </td>
    <td align="center"><img src="http://47.109.18.97/images/zl-html2.jpg" width="300" height="300"/></td>
    <td align="center"><img src="http://47.109.18.97/images/zl-html3.jpg" width="300" height="300"/></td>
    <td align="center"><img src="http://47.109.18.97/images/zl-html4.jpg" width="300" height="300"/></td>
    <td align="center"><img src="http://47.109.18.97/images/zl-html5.jpg" width="300" height="300"/></td>
    
  </tr>
  <tr>
    <td align="center"><h1>安徒生童话故事</h1><br>安徒生 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>“丑小鸭”塑造了一个具有高尚<br>心灵的理想形象;“卖火柴的小女孩”<br>描绘了一幅震撼心灵的悲惨画面，<br>却又是这般美丽；“皇帝的新装”、<br>“五颗豌豆”在揭露假恶丑的同时，<br>又充满了喜剧性的幽默感；<br>“野天鹅”那出神入化的奇妙意境，<br>洋溢着诗一般的抒情色彩。</div>
  </el-collapse-item>
  </el-collapse>
  </td>
    <td align="center"><h1>小王子</h1><br>埃克苏佩里 著<el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>
        本书是法国知名飞行员作家圣-埃克苏佩里的代表作，<br>讲述了小王子在自己的小行星上与他喜爱的玫瑰花闹了别扭，于是独自一人开始了宇宙旅行。
    </div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>寓言故事精品</h1>冯志远 著<el-collapse >
  <el-collapse-item title="简介" name="1">
    <div>大森林里生活着许多活泼可爱的动物，动物们很团结，它们推选德高望重的狮子为大王，让狮子保护和照顾它们。 大狗和公鸡是邻居，也是好伙伴。它们有福同享，有难同当，彼此相互照应，互相帮助。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>一千零一夜</h1>佚名 著<el-collapse  >
  <el-collapse-item title="简介" name="1">
    <div>本书有着浓郁的阿拉伯风格，读者可以随着一个个主人公经历着不同旅程，感受着故事中人物的生活，体会着他们的勤劳、善良。并在这些奇妙而美丽的故事中发掘人生的真谛，领悟人性中最真、最美的瞬间。</div>
  </el-collapse-item>
  </el-collapse></td>
    <td align="center"><h1>伊索寓言</h1>伊索 著<el-collapse>
  <el-collapse-item title="简介" name="1">
    <div>《伊索寓言》中收录有300多则寓言，内容大多与动物有关。书中讲述的故事简短精练，刻画出来的形象鲜明生动，每则故事都蕴含哲理，或揭露和批判社会矛盾，或抒发对人生的领悟，或总结日常生活经验。</div>
  </el-collapse-item>
  </el-collapse></td>
  </tr>
</table>
        </div>
        <el-divider></el-divider>
    </div>

</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
         carousel: []
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
     this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}
</style>
